<template>
  <div class="header">
    <p>{{seller.name}}</p>
    <img :src="seller.avatar" alt="" @click="showDetail">
    <h3>{{msg}}</h3>
    <Detail/>
  </div>
</template>

<script>
  import {mapGetters} from 'vuex'
  import Detail from "../detail/Detail";

  export default {
    created() {
      this.$store.dispatch('getSeller')
    },
    computed: {
      ...mapGetters([
        'seller'
      ]),
      msg() {
        return 'welcome'
      }
    },
    components: {
      Detail
    },
    methods: {
      showDetail() {
        this.$store.dispatch('showDetail')
      }
    }
  }
</script>

<style lang="less" scoped>
  .header {
    position: relative;
    height: 134px;
    background-color: #cccccc;

    p {
      text-align: center;
    }

    img {
      position: absolute;
      width: 70px;
      height: 70px;
      bottom: 25px;
      left: 10px;
    }
  }
</style>
